<template>
	<view class="contai">
		<view class="const">
			
			<slider-verify :isShow="sliderVerifyFLag" @touchSliderResult="verifyResult" ref="verifyElement"></slider-verify>
		<uni-easyinput type="textarea" placeholder="请输入内容" @input="ipt"></uni-easyinput>
		<button type="default" @click="btn()">搜索</button>
		<view class="xia">
			<view class="lis" v-if="list" >
				<view v-for="(item,index) in list" :key="index" class="b"
				:style="{'background-color':colorlists[Math.floor(Math.random() * colorlists.length)]}"
				
				>
				{{item}}
			</view>
			</view>
			
			<view class="lt" v-else>
			<text>查询说明</text>
			<ul class="ul">
				<li>本功能可以帮助你快速理解网络新词缩写含义,比如yyds</li>
			</ul>
			</view>
			
		</view>
	</view>
	</view>
</template>

<script>
	import sliderVerify from '@/components/slider-verify/slider-verify.vue';
	import axios from 'axios'
	import $ from 'jquery'
	export default {
		 components: {
		        'slider-verify': sliderVerify
		    },
		data() {
			return {
				sliderVerifyFLag: false,
			list:""	,
			bb:"",
			xz:false,
		colorlists: [
        'hsl(42, 48%, 54%)',
        'hsl(138, 24%, 48%)',
        'rgb(200, 138, 131)',
        'rgb(84, 221, 226)',
        'rgb(178, 199, 168)',
        'rgb(16, 195, 195)',
        'hsl(0, 21%, 68%)',
        'rgb(226, 166, 198)',
        'hsl(278, 17%, 66%)',
        'rgb(153, 199, 235)',
        'blueviolet'
      ]
			}
		},
		
		methods:{
			 verifyResult(res) {
				var self= this
			            this.sliderVerifyFLag = false;
			
			            if (res) {  //校验通过
		uni.request({
				url:`https://v2.alapi.cn/api/abbr?abbr=${self.bb}&token=SvTkUJqVBqdWdGM6`,
				success(res) {
					if(res!=undefined){	
					self.list=res.data.data.explain_arr
					}
				}
			})
			            }else{
			                // 校验失败,点击关闭按钮
			            }
			
			
			},
			
			
			
			
			
			
			
			ipt(e){
				
				if(e){
				this.bb=e
					console.log(e)
				}
			}
			,
			
			btn(){
				
				var self= this
				if(self.bb){
					self.sliderVerifyFLag=true
					console.log(self.xz)
					}else{
						uni.showToast({
							title: '不能为空',
							duration: 2000
						});
					}
				
				
			

			}
		},
		mounted() {
		
	}
	}
</script>

<style>
	   .contai{
	            width: 750rpx;
	            height: 100vh;
				padding: 40rpx 20rpx 0px 20rpx;
				background: #C8C7CC;
				
				box-sizing: border-box;
	        }
.const{
	/* width: 750rpx; */
	/* height: 60%; */
	    box-shadow: 8rpx 16rpx 14rpx #c0c0c0;
	padding: 40rpx 40rpx 40rpx 40rpx;
	background: #F8F8F8;
	}
	.xia{
		/* width: 750rpx; */
		
		/* height: 200rpx; */
		background:#007AFF;
	}
	.ul li{
		list-style: none;
		margin-left: 40rpx;
	}
	.b{
		padding: 5px;
		margin-left: 20rpx;
		float: left;
		color: #F0F0F0;
		/* background: #2B333F; */
		margin-top: 10rpx;
	}
	.lis{
		padding: 20rpx;
		background: #007AFF;
		overflow: hidden;
	}
	.lt{
		padding: 20rpx;
		background: #007AFF;
		overflow: hidden;
	}
</style>
